import React from 'react'
import {NavLink,Routes,Route,Navigate} from 'react-router-dom'
import Index from './pages/index'
import List from './pages/list'
// import router from './router'
import './App.css'
export default function App() {
  return (
    <>
    <div className='container'>
        <div className='conatiner-nav'>
            <button className='nav-item'><NavLink style={{display:'block'}} to="/index">Index</NavLink></button>
            <button className='nav-item'><NavLink style={{display:'block'}} to="/list">List</NavLink></button>
        </div>
        <div className='container-show'>
            <Routes>
                {/* {
                    router.route.map(i=>{
                        return <Route key={i} path={i.path} element={i.component}></Route>
                    })
                } */}
                <Route path='/index' element={<Index/>}></Route>
                <Route path='/list' element={<List/>}></Route>
                <Route path='/' element={ <Navigate to="index"/>}></Route>

            </Routes>   
        </div>
    </div>
    </>
  )
}
